<template>
  <div class="order-detail-layout">
    <div class="order-status">
      <div v-show="!isWechat" class="nav"></div>

      <div class="container">
        <div class="label">支付成功</div>
        <div class="icon">
          <img src />
        </div>
      </div>
    </div>

    <div class="order-content">
      <div class="header">
        <span class="name">{{ orderInfo.name }}</span>
        <van-icon name="arrow" color="#999999" />
      </div>

      <row-image
        :name="orderInfo.name"
        :desc="orderInfo.desc"
        :cover="orderInfo.cover"
        :tags="orderInfo.tags"
        :price="orderInfo.price"
        :sale="orderInfo.sale"
      />

      <div class="footer">
        <span>{{ `共${orderInfo.number}件商品 合计：` }}</span>
        <span class="price">
          <span>¥</span>
          <span :style="{ fontSize: '16px' }">{{ intager(orderInfo.price) }}</span>
          <span>{{ `.${decimal(orderInfo.price)}` }}</span>
        </span>
      </div>
    </div>

    <div class="order-info">
      <div class="header">订单信息</div>

      <div class="container">
        <div v-for="item in orderItems" :key="item.key" class="info-item">
          <div>
            <div class="label">{{ `${item.label}：` }}</div>
            <div class="value">{{ orderInfo[item.key] }}</div>
          </div>
          <a
            v-if="item.copy"
            class="copy"
            v-clipboard:copy="orderInfo[item.key]"
            v-clipboard:success="onCopySuccess"
          >复制</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
import { mapGetters } from 'vuex'
import RowImage from '@/components/Order/RowImage'
import { messages, toast } from '@/utils/messages'

Vue.use(Icon)

const orderItems = [
  { label: '商品单号', key: 'productNo', copy: true },
  { label: '支付单号', key: 'paymentNo', copy: true },
  { label: '创建时间', key: 'createTime' },
  { label: '成交时间', key: 'updateTime' },
  { label: '支付方式', key: 'payment' }
]

const intager = value => {
  const [intager] = String(Number(value).toFixed(2)).split('.')
  return intager
}

const decimal = value => {
  const [intager, decimal] = String(Number(value).toFixed(2)).split('.')
  return decimal
}

export default {
  components: {
    RowImage
  },

  data() {
    return {
      orderInfo: {
        id: 1,
        cover: '',
        name: '简历精修课',
        desc: '商品描述商品描述描述商品描述描述商品描...',
        tags: ['专业培训', '读书补贴'],
        status: 'success',
        price: 18.98,
        sale: 3.88,
        number: 1,
        productNo: '10012890471019',
        paymentNo: '2020102470',
        createTime: '2020-03-19 20:47:49',
        updateTime: '2020-03-19 20:47:49',
        payment: '微信支付'
      },
      orderItems,
      intager,
      decimal
    }
  },

  computed: {
    ...mapGetters(['browser']),

    isWechat() {
      return this.browser.toLowerCase().indexOf('micromessenger') > -1
    }
  },

  methods: {
    onCopySuccess() {
      toast(messages.COPY_SUCCESS)
    }
  }
}
</script>

<style lang="less" scoped>
.order-detail-layout {
  .order-status {
    background: linear-gradient(to bottom, #45bdff, #2188ff);
    position: absolute;
    top: 0;

    .nav {
      height: 46px;
      width: 100vw;
    }

    .container {
      padding: 30px 57px 19px 57px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .label {
        font-size: 21px;
        color: #ffffff;
        font-weight: 500;
      }

      .icon {
        img {
          width: 90px;
          height: 90px;
        }
      }
    }
  }

  .order-content {
    margin-top: 147px;
    background-color: #ffffff;

    .header {
      padding: 15px 17px 14.5px 17px;
      display: flex;
      align-items: center;

      div {
        display: flex;
        align-items: center;
      }

      .name {
        margin-right: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #333333;
      }
    }

    .footer {
      padding: 11.5px 17px 12.5px 17px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: #999999;

      .price {
        color: #ff7376;
        font-size: 12px;
      }
    }
  }

  .order-info {
    padding: 0 17px;
    margin-top: 5px;
    background-color: #ffffff;

    .header {
      padding-top: 15px;
      padding-bottom: 12px;
      border-bottom: 0.5px solid #dddddd;
      font-size: 15px;
      color: #333333;
      font-weight: 500;
    }

    .container {
      padding-top: 7px;
      padding-bottom: 19px;
      font-size: 14px;
      line-height: 30px;

      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
          display: flex;
        }

        .label {
          font-weight: 500;
          color: #999999;
        }

        .value {
          font-weight: 500;
          color: #666666;
        }

        .copy {
          color: #4586ff;
        }
      }
    }
  }
}
</style>